<template>
	<view>
		<view class="topBox">
			<head-navbar :back="true" :bgColor="'#FFFFFF'">
				<view class="">消费券</view>
			</head-navbar>
			<view class="content">
				<view class="top">
					<image src="../../static/img/yueBg.png" mode="" class="img"></image>
					<view class="txt">
						<view class="title">
							消费券数量
						</view>
						<view class="total">
							<text>{{moneyNumber || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:getTabbarContentHeight + 'px'}" @scrolltolower="loadPage">
			<view class="couponBox">
				<view class="coupon-item" v-for="(item,index) in list">
					<view class="coupon-money">
						<view class="nick">NO：{{item.orderNo}}</view>
						<view class="layof" :style="{color:theme}">￥{{item.totalAmount}}</view>
						<view class="end_time">可用金额：{{item.usingAmount}}/{{item.totalAmount}}</view>
						<view>
							<view class="demand">截止时间：{{item.endTime}}</view>
						</view>
					</view>
					<view class="get-btn"  :style="{color:color, borderColor:color, background:solid}" @click="toPage(0,'/pages/record/couponList?couponId=' + item.id)">查看明细</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from "@/api/user/index.js";
	export default {
		data() {
			return {
				getTabbarContentHeight: 0,
				moneyNumber: '',
				list: [],
				theme: '#ff9000',
				solid: '#ffffff',
				color: '#ff9000',
			}
		},
		onLoad(option) {
			this.moneyNumber = option.price;
			this.couponGetList();
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
			// loadPage() {
			// 	if(this.pageNo <= this.pages ){
			// 		this.couponGetList()
			// 	}
			// },			
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.pageNo = 1
				this.couponGetList()
			},
			// async getRecordList() {
			// 	try {
			// 		let params = {
			// 			costType:1,			//
			// 			pageNum:this.pageNum,
			// 			pageSize:this.pageSize
			// 		}
			// 		const ret = await api.getUserWalletLogList(params)
			// 		// this.moneyNumber = ret.data.obj.
			// 		this.recordList = ret.data.obj.data;
			// 	} catch (error) {

			// 	}
			// },
			couponGetList() {
				api.couponGetList().then(res => {
					this.list = res.data.obj
					this.status = 'nomore'
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.top {
			position: relative;

			.img {
				width: 100%;
				height: 340upx;
			}

			.txt {
				position: absolute;
				top: 100upx;
				left: 61upx;
				color: #FFFFFF;

				// font-weight: bold;
				.title {
					font-size: 27upx;
				}

				.total {
					margin-top: 20upx;
					font-size: 59upx;
				}
			}

			.yue {
				font-size: 27upx;
				color: #FFFFFF;
				position: absolute;
				bottom: 22upx;
				right: 30upx;
			}

			.record {
				position: absolute;
				top: 50upx;
				right: 50upx;
				color: #fff;
			}
		}
	}

	.btnlist {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		display: flex;

	}

	.sumbtn {
		height: 60upx;
		width: 140rpx;
		line-height: 60rpx;
		background: linear-gradient(270deg, #ff2020, #ff5a02);
		color: #FFFFFF;
		border-radius: 100upx;
		margin-top: 30upx;
		font-size: 26rpx;
		margin-left: 30rpx !important;
		margin-right: 0 !important;
	}

	.couponBox {
		padding: 30rpx;
	}

	.coupon-item {
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10upx;
		padding: 0 20upx;
		margin-top: 22upx;
		border: 1px solid #eeeeee;
		position: relative;
        background: #FFFFFF;
		.coupon-money {
			width: 465upx;
			height: auto;
			display: table;
			float: left;
			padding: 26upx 0;
			border-style: none dotted none none;
			border-color: #eeeeee;

			.nick {
				width: 100%;
				height: 50upx;
				line-height: 30upx;
				font-size: 25rpx;
				color: #000000;
			}

			.tit {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 25rpx;
				color: #000000;
			}

			.demand {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: 25rpx;
				margin-top: 10rpx;
				color: #949494;
			}

			.layof {
				width: 100%;
				height: 48upx;
				line-height: 30upx;
				font-size: 44upx;
				color: #ff9000;
				font-weight: bold;
			}

			.end_time {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: 25rpx;
				color: #000000;
			}
		}

		.get-btn {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			position: absolute;
			top: 50%;
			right: 26upx;
			margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #ff9000;
			border: 1px solid #ff9000;
			font-size: $font-sm;
			float: right;
		}
	}

	.coupon-item:after {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		top: -1px;
		border-radius: 0 0 40upx 40upx;
		content: "";
		display: block;
		background: #f6f6f6;
		border: 1px solid #eeeeee;
		border-top: 0px;
	}

	.coupon-item:before {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		bottom: -1px;
		border-radius: 40upx 40upx 0 0;
		content: "";
		display: block;
		background: #f6f6f6;
		border: 1px solid #eeeeee;
		border-bottom: 0px;
	}
</style>
